import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import ClassName from 'classnames'
import './index.scss'
export default class LiPrice extends Component {

  static options = {
    addGlobalClass: true
  }

  static defaultProps = {
    className: '',
    // 文字颜色
    color: '',
    // 金额类型
    moneyType: '￥',
    moneyTypeSize: '',
    // 金额
    money: 0,
    // 文字大小
    fontSize: Taro.pxTransform(40),
    // 是否加粗
    fontBold: true,
    // 是否是禁用类型
    disabled: false,
    // 禁用类型文字大小
    disabledFontSize: Taro.pxTransform(22),
    disPlay: '',
    // 小数点位数
    decimal: 2
  }

  state = {}
  render () {
    const {
      className,
      color,
      moneyType,
      moneyTypeSize,
      money,
      fontSize,
      fontBold,
      disabled,
      disabledFontSize,
      disPlay,
      decimal
    } = this.props;
    // 处理金额保留保留两位小数点并且带上千分位符号
    const moneyNum = parseFloat(Number(money)).toFixed(decimal).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')

    return (
      <View
        className={ClassName('price', className, disabled ? 'disabled' : '')}
        style={{
          display: disPlay,
          color: color,
          fontSize: disabled ? disabledFontSize : fontSize,
          fontWeight: fontBold ? '500' : 'normal'
        }}
      >
        <Text className='price-type' style={{ fontSize: moneyTypeSize }}>{moneyType}</Text>
        <Text className='price-money'>{moneyNum}</Text>
      </View>
    )
  }
}